﻿{extend name="public:base" /}{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<style>
    .select-box select {
        margin-right: 10px;
    }
</style>{/block}{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">Banner</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">显示位置</label>
                                <div class="col-sm-2">
                                    <input type="radio" name="position" value="1" title="首页" {$info.position != 2 ? 'checked' : ''}>
                                    <input type="radio" name="position" value="2" title="政府采购页" {$info.position == 2 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">请选择跳转对象</label>
                                <div class="col-sm-2">
                                    <select class="form-control type_select" name="type" lay-filter="type_select">
                                        <option value="0">请选择类型</option>
                                        <option value="1" {$info.type==1 ?
                                        'selected' : ''}>服务</option>
                                        <option value="2" {$info.type== 2 ?
                                        'selected' : ''}>文章</option>
                                    </select>
                                </div>
                                <div class="col-sm-2 service-box service_type">
                                    <select class="form-control" lay-filter="service_category">
                                        <option value="0">请选择类目</option>
                                        {volist name="service_list" id="vo"}
                                        <option value="{$vo.id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <div class="col-sm-2 service-box service">
                                    <select class="form-control" lay-filter="service">
                                        <option value="0">请选择服务</option>
                                    </select>
                                </div>
                                <div class="col-sm-2 article-box" style="display: none">
                                    <select class="form-control" lay-filter="article">
                                        <option value="0">请选择文章</option>
                                        {volist name="article_list" id="vo"}
                                        <option value="{$vo.id}">{$vo.title}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}
{include file="public/preview-img-mask" swiper-id="cropper-preview" /}
{/block}

{block name='js'}
<script src="__STATIC__/layui/layui.js"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;

        var service_list_obj = {$service_list_obj};
        var type = '{$info.type}';
        var to_id = '{$info.to_id}';

        // 初始化表单
        initForm();

        // 监听类型选择
        form.on('select(type_select)', function (data) {
            var selectedType = data.value;
            renderType(selectedType);
            clearSelection();
            form.render(); // 刷新 layui 表单组件
        });

        // 监听类目选择
        form.on('select(service_category)', function (data) {
            var categoryId = data.value;
            loadServicesByCategory(categoryId);
        });

        // 监听服务/文章选择，将值写入隐藏字段
        form.on('select(service)', function (data) {
            updateHiddenToId(data.value);
        });

        form.on('select(article)', function (data) {
            updateHiddenToId(data.value);
        });

        // 初始化：类型 + 已选 to_id 回显
        function initForm() {
            renderType(type);

            if (type == '1') {
                let categoryId = getServiceCategory(to_id);
                $('.service_type select').val(categoryId);
                form.render('select');

                setTimeout(function () {
                    loadServicesByCategory(categoryId, to_id);
                }, 100);
            } else if (type == '2') {
                $('.article-box select').val(to_id);
                updateHiddenToId(to_id);
                form.render('select');
            }
        }

        // 控制显示隐藏
        function renderType(type) {
            if (type == '1') {
                $('.service-box').show();
                $('.article-box').hide();
            } else if (type == '2') {
                $('.service-box').hide();
                $('.article-box').show();
            } else {
                $('.service-box').hide();
                $('.article-box').hide();
            }
        }

        // 清空选择项
        function clearSelection() {
            $('.service_type select').val(0);
            $('.service select').empty().append('<option value="0">请选择服务</option>');
            $('.article-box select').val(0);
            $('#to_id_hidden').remove();
            form.render('select');
        }

        // 设置隐藏字段
        function updateHiddenToId(value) {
            $('#to_id_hidden').remove();
            $('<input>').attr({
                type: 'hidden',
                id: 'to_id_hidden',
                name: 'to_id',
                value: value
            }).appendTo('form');
        }

        // 查找 to_id 属于哪个类目
        function getServiceCategory(serviceId) {
            for (let i = 0; i < service_list_obj.length; i++) {
                var services = service_list_obj[i].service || [];
                for (let j = 0; j < services.length; j++) {
                    if (services[j].id == serviceId) {
                        return service_list_obj[i].id;
                    }
                }
            }
            return 0;
        }

        // 模拟 select 触发（用于回显）
        function formSelectTrigger(filterName, value) {
            form.on('select(' + filterName + ')', {
                value: value
            });
            $('.layui-form select[name="' + filterName + '"]').val(value);
            form.render('select');
        }

        // 根据类目 id 加载服务下拉框，并选中给定服务值
        function loadServicesByCategory(categoryId, selectedServiceId = 0) {
            var services = [];
            for (let i = 0; i < service_list_obj.length; i++) {
                if (service_list_obj[i].id == categoryId) {
                    services = service_list_obj[i].service;
                    break;
                }
            }

            var $serviceSelect = $('.service select');
            $serviceSelect.empty().append('<option value="0">请选择服务</option>');
            for (let i = 0; i < services.length; i++) {
                var selected = services[i].id == selectedServiceId ? 'selected' : '';
                $serviceSelect.append(`<option value="${services[i].id}" ${selected}>${services[i].name}</option>`);
            }

            form.render('select');

            // 更新隐藏字段
            if (selectedServiceId) {
                updateHiddenToId(selectedServiceId);
            }
        }

    });
</script>{/block}

